Como dice el título, ¿hay alguna forma de actualizar la variable (que vincula a cuántos divs hay en un padre)? El código que tengo funciona, pero estaba buscando otra forma... El código que tengo:
function addDiv() { //adds a div into the parent } parent.addEventListener("mouseover", ()=>{ getAllLists = parent.querySelectorAll(".list-name-tile") getAllLists.forEach(list => { list.addEventListener("click", ()=>{ //other code }) }); }) En mi código, usé "mouseover" para actualizar getAllLists ; Me preguntaba si había otra manera de hacer esto y lograr un efecto similar o ¿es esta la mejor manera? Por favor pregúnteme para aclarar o si necesita información adicional.
¡Gracias!
En mi opinión, recuperar los elementos div en el detector de eventos mouseover está bien.
Sin embargo, hay un problema en su código. Cada vez que pasa el cursor sobre el elemento principal, el detector de eventos de clic se adjunta a los elementos secundarios una y otra vez. Puede intentarlo insertando un archivo console.log() en el controlador de eventos de clic. Pase el cursor sobre el elemento principal varias veces y luego haga clic en un elemento secundario. Verá la salida de console.log varias veces.
Esto se debe a que el detector de eventos del clicker se adjunta cada vez que se desplaza sobre el elemento principal.
Hasta donde entiendo su pregunta, le gustaría agregar un detector de eventos de clic a todos los elementos secundarios (incluso los que se agregan dinámicamente). Si ese es el caso, puede hacer uso de la Delegación de eventos .
El burbujeo también nos permite aprovechar la delegación de eventos: este concepto se basa en el hecho de que si desea que se ejecute algún código cuando selecciona cualquiera de una gran cantidad de elementos secundarios, puede configurar el detector de eventos en su padre y tener eventos que sucedan en ellos burbujean a sus padres en lugar de tener que configurar el oyente de eventos en cada niño individualmente. Recuerde, la creación de burbujas implica verificar primero el elemento en el que se activa el evento para un controlador de eventos, luego pasar al padre del elemento, etc.
Un buen ejemplo es una serie de elementos de la lista: si desea que cada uno de ellos muestre un mensaje emergente cuando se seleccione, puede configurar el detector de eventos de clic en el padre y los eventos se propagarán de los elementos de la lista al .
Burbujeo y captura de eventos (desplácese hacia abajo hasta la sección "Delegación de eventos")
A través de la Delegación de eventos puedes hacerlo de esta manera:
<div id="parent"> <div class="list-name-tile">First div</div> <div class="list-name-tile">Second div</div> </div> const parent = document.getElementById("parent"); parent.addEventListener("click", e => { if (e.target.classList.contains("list-name-tile")) { // Do stuff } }); function addDiv() { const div = document.createElement("div"); div.classList.add("list-name-tile"); div.textContent = "Next div"; parent.appendChild(div); } addDiv();En el ejemplo, he adjuntado un detector de eventos de clic al elemento principal. Entonces, cada vez que hace clic en un elemento secundario, el evento "burbujea" al siguiente ancestro, que es su elemento principal. Ahí tenemos el detector de eventos y podemos manejarlo. En el ejemplo, lo he filtrado para que solo haga algo cuando el elemento que ha activado el evento tiene una clase específica. También puede filtrar por eventos específicos, etc.